<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>调用方法</title>
    </head>
    <body>

        <h3>在模板中调用方法</h3>

        <div class="root"></div>

        <script src="vue.global.js"></script>

        <script type="text/javascript">
            let options = {
                template: `<p>{{ format( now ) }}</p>`,
                data(){
                    return {
                        now: new Date()
                    }
                },
                methods: {
                    format( value ) {
                        console.log( 'value: ' , Object.prototype.toString.call( value ) );
                        let date = value ;
                        let hours = '' + date.getHours();
                        hours = hours.padStart(2,'0');

                        let minutes = String( date.getMinutes() );
                        minutes = minutes.padStart(2,'0');

                        let seconds = String( date.getSeconds() );
                        seconds = seconds.padStart(2,'0');

                        return `${date.getFullYear()}年
                                ${date.getMonth()+1}月
                                ${date.getDate()}日 
                                ${hours}:${minutes}:${seconds}`;

                    }
                }
            }

            const app = Vue.createApp(options);
            const instance = app.mount('.root');
            console.log( instance );
        </script>
        
    </body>
</html>